<template>
    <div class='container'>
        <div class="content" v-for="(item,index) in list" :key="index"  @click="gocompany(item.id)">
            <div style="position:absolute;top:40px;width:50px;height:50px;border-radius:50%;border:1px solid #999;background:#1890ff;line-height:50px;text-align:center; font-size:20px;color:white;">
               <div>{{item.factoryCode}}</div>
            </div>
            <div style="position:absolute;margin-left:20px;top:20px;left:60px;">
                <div style="font-size:18px;line-height:30px;">{{item.factoryName}}</div>
                <div class="font1">工厂代码：{{item.factoryCode}}</div>
                <div class="font1">地址：{{item.factoryAddress}}</div>
            </div>
        </div>
        <div class="content1">
            <img src="../../../../assets/img/7f32f31c372f84578ddddf4e6fadf65.png" alt="" style="vertical-align:middle;margin-top:40px; cursor:pointer;" @click="goadd">
        </div>
        <el-dialog
            title="新增"
            :visible.sync="show"
            width="30%"
            :before-close="handleClose">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="100px" class="demo-ruleForm">
                <el-form-item label="工厂名称：">
                    <el-input placeholder="请输入内容" v-model="ruleForm.factoryName" style="width:300px">
                    </el-input>
                </el-form-item>
                <el-form-item label="工厂代码：">
                    <el-input placeholder="请输入内容" v-model="ruleForm.factoryCode" style="width:300px">
                    </el-input>
                </el-form-item>
                <el-form-item label="工厂地址：">
                    <el-input placeholder="请输入内容" v-model="ruleForm.factoryAddress" style="width:300px">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="addcompany('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {manage_findAll,company_save} from "@/request/manageapi"
export default{
    data() {
        return{
            list:[],
            show:false,
            ruleForm:{},
            labelPosition:'right',
            rules:{
                 password: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                departmentId: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ], 
            }
        }
    },
    mounted () {
        this.init()
    },
    methods:{
        gocompany(id){
            this.$router.push({
                path:'/factory/companmy',
                query:{
                    id:id
                }
            })
        },
        init(){
            manage_findAll("").then((res)=>{
                this.list = res.data
            })
        },
        goadd(){
            this.show =true
        },
        handleClose(){
            this.show = false
        },
        addcompany(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let formdata = new FormData()
                    for(var a in this.ruleForm){
                        if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
                            this.ruleForm[a] = ""
                            formdata.append(a,'') 
                        }else{
                            formdata.append(a,this.ruleForm[a])
                        }
                    }
                    company_save(formdata).then((res)=>{
                         this.$notify({
                            title: '操作成功',
                            message: '保存成功',
                            type: 'success'
                        });
                        this.show = false
                        this.init()
                    }).catch(() => {
                        this.$notify({
                            title: '提示',
                            message: '已取消保存',
                            type: 'info'
                        });         
                    });
                 }else{
                    return false
                }
            })
        }
    }
}
</script>


<style scoped>
.container{
    min-height:65%;
}
.content{
    position: relative;
    display: inline-block;
    width: 270px;
    min-height: 160px;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin: 20px;
}
.content1{
    position: relative;
    display: inline-block;
    width: 270px;
    height: 160px;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    margin: 20px;
    text-align: center;
}
.font1{
    font-size:14px;
    line-height: 30px;
    color:#999;
}
</style>